<template>
  <div class="app-container">
    <div class="label-name">
      <h4>
        标签管理
      </h4>
      <el-button
        size="small"
        type="primary"
        @click="openAddLabelDialog()"
      >添加分类</el-button>
    </div>

    <div class="label-container">
      <el-row
        :gutter="20"
        class="tag-list"
      >
        <el-col
          :span="6"
          v-for="(item,index) in allLabelList"
          :key="index"
        >
          <h5 class="__itemheader">{{item.parenLabelName}}</h5>
          <el-tag
            v-for="(tag,index) in item.childLabels"
            :key="index"
          >{{tag.childLabelName}}</el-tag>
          <el-button
            class="el-tag"
            size="small"
            @click="openAddTagDialog(item.parenLabelId,item.parenLabelName)"
          >+</el-button>

        </el-col>

      </el-row>
      <el-dialog
        title="添加分类"
        :visible.sync="addLabelDialog"
        width="30%"
        center
      >
        <el-form
          :model="addLabelData"
          label-position="right"
        >
          <el-input
            v-model="addLabelData.name"
            :autofocus="true"
            @keyup.enter.native="getSaveLabel"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form>

        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="addLabelDialog = false">取 消</el-button>
          <el-button
            type="primary"
            @click="getSaveLabel()"
          >保 存</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :title="addLabelData.title"
        :visible.sync="addTagDialog"
        width="30%"
        center
      >
        <el-form
          :model="addLabelData"
          label-position="right"
        >
          <el-input
            v-model="addLabelData.name"
            :autofocus="true"
            @keyup.enter.native="getSaveLabel"
            placeholder="请输入标签名称"
          ></el-input>
        </el-form>

        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="addTagDialog = false">取 消</el-button>
          <el-button
            type="primary"
            @click="getSaveLabel()"
          >保 存</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import { fetchLabelList, fetchSaveLabel } from "@/api/table";
export default {
  data() {
    return {
      allLabelList: [],
      addLabelDialog: false,
      addTagDialog: false,
      addLabelData: {
        name: "",
        id: "",
        title: ""
      }
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getLabelList();
    },
    openAddLabelDialog() {
      this.addLabelDialog = true;
      this.addLabelData.id = "0";
      this.addLabelData.name = "";
    },
    openAddTagDialog(id, title) {
      this.addTagDialog = true;
      this.addLabelData.id = id;
      this.addLabelData.name = "";
      this.addLabelData.title = "添加标签(" + title + ")";
    },
    async getLabelList() {
      const res = await fetchLabelList();
      this.allLabelList = res.data;
    },
    async getSaveLabel() {
      const res = await fetchSaveLabel({
        labelName: this.addLabelData.name,
        labelParentId: this.addLabelData.id
      });
      this.addLabelDialog = false;
      this.addTagDialog = false;
      this.getLabelList();
      this.$message({
        type: "success",
        message: "添加成功"
      });
    }
  }
};
</script>
<style lang="less" scoped>
.label-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-tag {
  margin: 5px;
}
.tag-list {
  .__itemheader {
    margin: 0;
    line-height: 32px;
    font-weight: bold;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #eee;
  }
}
</style>
